<template>
  <div class="">
    <!-- <button @click="toggleWeekends">toggle weekends</button> -->
    <FullCalendar
      :options="calendarOptions"
      @event-selected="eventClick(events)"
    />
  </div>
</template>

<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'
// import $ from 'jquery'
export default {
  components: {
    FullCalendar // make the <FullCalendar> tag available
  },
  data () {
    return {
      calendarOptions: {
        header: {
          left: 'prev, next, today',
          center: 'title',
          right: 'month'
        },
        plugins: [dayGridPlugin, interactionPlugin],
        initialView: 'dayGridMonth',
        dateClick: this.handleDateClick,
        events:function(start, end, callback){
          console.log(start, end, callback)
        }
      }
    }
  },
  created () {
    // $('#calendar')
    //   .find('.fc-prev-button, .fc-next-button')
    //   .click(function () {
    //     console.log($(this).hasClass('fc-prev-button') ? 'prev' : 'next')
    //   })
    // $('#calendar').fullCalendar({
    // lang: 'zh-cn',
    // header: {
    //    left: 'prev, next, today',
    //    center: 'title',
    //    right: 'month'
    // },
    // height: 500,
    // dayClick: function(date, jsEvent, view) {
    //    //点击空白日期调用
    // },
    // eventClick: function(calEvent, jsEvent, view) {
    // //点击已有数据的日期调用
    // },
    // defaultDate: moment(),//默认日期
    // events:function(start, end, callback){
    // //prev上一月, next下一月等事件时调用
    // }
    // })
  },
  methods: {
    handleDateClick: function (arg) {
      console.log(arg)
      //   alert('date click! ' + arg.dateStr)
    },
    eventClick (events) {
      console.log(events)
    },
    eventsf (events) {
      console.log(events)
    }
  }
}
</script>

<style lang='less'></style>
